import React, {
  useState,
  useEffect,
  useLayoutEffect,
  useCallback,
} from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import './i18n/config'
import { useTranslation } from 'react-i18next'
import { SunOutlined, MoonOutlined } from "@ant-design/icons";
import { Button, Layout, Menu, theme, Select, ConfigProvider } from "antd";
import { Checkbox, Form, Input, Modal } from 'antd';
import axios from './api/request'
import { Outlet, NavLink, Link, useNavigate, Navigate } from "react-router-dom";
import { homeRouter } from './router/router'
const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const { t, i18n } = useTranslation()
  const onChange = () => {
    i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh')
  }
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    const res = await axios.post('/login', values)
    localStorage.setItem('token', res.data.token)
    alert('登录成功')
    navigate('/home')
    setIsModalOpen(false);
  };
  const [menuItems, setMenuItems] = useState([
    {
      key: "1",
      icon: <UserOutlined />,
      label: "nav 1",
    },
  ]);
  const items1: MenuProps['items'] = ['首页', 'BOT', '沸点', '课程', '直播', '活动', 'AI刷题', '商城'].map((key) => ({
    key,
    label: `${key}`,
  }));
  const initMenuItem = useCallback((routes: any[]) => {
    const items = routes.map((m) => {
      const res: any = {};
      res.key = m.path;
      if (m.icon) res.icon = m.icon;
      res.label = m.label;
      if (m.children && m.children.length > 0) {
        res.children = initMenuItem(m.children);
      }
      return res;
    });
    return items;
  }, []);

  useLayoutEffect(() => {
    setMenuItems(initMenuItem(homeRouter));
  }, []);

  const clickMenu = useCallback((obj) => {
    navigate(obj.key);
  }, []);

  const [isdk, setIsdk] = useState(true);

  const qiehuan = () => {
    setIsdk(!isdk);
  };
  return (
    <ConfigProvider
      theme={{
        algorithm: isdk ? theme.defaultAlgorithm : theme.darkAlgorithm,
      }}>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items1}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Layout style={{ height: "100vh" }}>
        <Navigate to="/home"></Navigate>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={["/home"]}
            items={menuItems}
            onClick={clickMenu}
          />
        </Sider>

        <Layout>
          <div>
            <h3>{t('name')}</h3>
            <Button style={{ float: 'right' }} onClick={() => onChange()}>切换{i18n.language === 'zh' ? '英文' : '中文'}</Button>
            <Button
              type="primary"
              icon={isdk ? <MoonOutlined /> : <SunOutlined />}
              onClick={qiehuan}
            >
              {isdk ? "夜晚" : "白天"}
            </Button>
            <Button type="primary" onClick={showModal}>登录</Button>
            <Modal
              title="login"
              open={isModalOpen}
            // onOk={handleOk}
            // onCancel={handleCancel}
            >
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  label="用户名"
                  name="account"
                  rules={[{ required: true, message: '请输入账号!' }]}
                >
                  <Input />
                </Form.Item>

                <Form.Item<FieldType>
                  label="密码"
                  name="password"
                  rules={[{ required: true, message: '请输入密码!' }]}
                >
                  <Input.Password />
                </Form.Item>

                <Form.Item label={null}>
                  <Button type="primary" htmlType="submit">
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </Modal>
          </div>
          <Header
            style={{
              padding: 0,
              background: colorBgContainer,
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >

            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                float: "left",
                fontSize: "16px",
                width: 64,
                height: 64,
              }}
            />

          </Header>
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default App;
